<template>
  <div class="result">
    <el-row>
        <el-col :span="24" class="result-con">
            <el-col :span="12">
                <p class="result-title">报名费查询</p>
                <p class="daochu">
                    <span>018-01-01 -  2018-01-30</span>
                    <el-dropdown trigger="click">
                        <span class="el-dropdown-link">
                            <i class="iconfont icon-daochu"></i>导出
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>导出PDF</el-dropdown-item>
                            <el-dropdown-item>导出excel</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </p>
                <p class="change">[更改时间]</p>
            </el-col>
            <el-col :span="12" class="right">
                <div class="number">
                    <div class="number-item">
                        <p class="number-total">365048</p>
                        <p>[元]</p>
                    </div>
                    <p class="record">正常记录,共35笔</p>
                </div>
                <div class="number">
                    <div class="number-item">
                        <p class="number-total">360548</p>
                        <p>[元]</p>
                    </div>
                    <p class="record2">作废记录，共5笔</p>
                </div>
                <div class="number">
                    <div class="number-item">
                        <p class="number-total">365480</p>
                        <p>[元]</p>
                    </div>
                    <p class="record3">作废合计，共2笔</p>
                </div>
            </el-col>
        </el-col>

        <el-col :span="24" class="my-table">
            <el-table
                class="table"
                :data="tableData"
                style="width: 100%;text-align: center">
                <el-table-column
                prop="name"
                label="姓名">
                </el-table-column>
                <el-table-column
                prop="date"
                label="类型">
                </el-table-column>
                <el-table-column
                prop="address"
                label="证件号码">
                </el-table-column>
                <el-table-column
                prop="date"
                label="入职时间">
                </el-table-column>
                <el-table-column
                prop="address"
                label="基本">
                </el-table-column>
                <el-table-column
                prop="address"
                label="绩效">
                </el-table-column>
                <el-table-column
                prop="address"
                label="工龄">
                </el-table-column>
                <el-table-column
                prop="jiangjin"
                label="奖金">
                </el-table-column>
                <el-table-column
                prop="koukuan"
                label="扣款">
                </el-table-column>
                <el-table-column
                prop="totalNum"
                label="总计">
                </el-table-column>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button class="option-btn" size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                        <el-button class="option-btn" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      tableData: []
    };
  }
};
</script>

<style scoped>
.my-table{
    margin-top: 14px;
}
.tabel .el-table{
    background: #f9f9f9;
}
.record {
  width: 33.33333333%;
  position: absolute;
  left: 0;
  text-align: center;
  bottom: -24px;
}
.record2 {
  width: 33.33333333%;
  position: absolute;
  left: 33.33333333%;
  text-align: center;
  bottom: -24px;
}
.record3 {
  width: 33.33333333%;
  position: absolute;
  left: 66.66666666%;
  text-align: center;
  bottom: -24px;
}
.result {
  height: 100%;
  background: #f9f9f9;
}
.result-con {
  padding: 30px 0;
  box-shadow: 1px 1px 3px 1px #cac4c4;
}
.result-title {
  width: 70%;
  font-size: 24px;
  color: #575757;
  text-align: center;
}
.daochu {
  width: 80%;
  text-align: center;
  padding: 20px 0;
}
.change {
  width: 70%;
  color: #ff8124;
  text-align: center;
  cursor: pointer;
}
.daochu .el-dropdown {
  cursor: pointer;
  padding: 7px 20px;
  background: #fff;
  border-radius: 30px;
  box-shadow: 1px 1px 3px 1px #cac4c4;
  margin-left: 20px;
  color: #ff8124;
}
.daochu .el-dropdown-menu__item:hover {
  color: #ff8124 !important;
}
.icon-daochu {
  margin-right: 10px;
}
.right {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
}
.number {
  width: 80px;
  height: 80px;
  border: 3px solid #fe9a51;
  padding: 6px;
  border-radius: 100%;
}
.number-item {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  box-shadow: 0 0 3px #cfcbcb;
  color: #ff8124;
  text-align: center;
}
.number-total {
  width: 100%;
  float: left;
  font-size: 20px;
  margin-top: 20px;
  padding: 5px 0;
  font-family: fontNum3;
  font-weight: bold;
}
</style>


